import { Component } from "react";
import { Button, Space, DatePicker, Image, Row, Col, Input, message } from 'antd';
import { userStore } from '@/stores/user';
import { observer } from 'mobx-react';
import { history } from 'umi';
import { SearchOutlined } from '@ant-design/icons';
import styles from './message.less';
import Header from '../components/header/index';
import pic1 from '../../assets/art2.png';
import Footer from '../components/footer';
import { messageStore } from "@/stores/messageStore";
import MessageModel from "@/models/message";

const { TextArea } = Input;
const info = () => {
  message.info('This is a normal message');
}
@observer
export default class Message extends Component {
  componentDidMount() {
    messageStore.listmessage();
    // messageStore.save();

  }

  inputChange(e: any) {
    let key = e.target.name;
    let value = e.target.value;
    console.log(value);
    switch (key) {
      case 'username':
        messageStore.username = value;
        break;
      case 'email':
        messageStore.email = value;
        break;
      case 'content':
        messageStore.content = value;
        break;
      default:
        break;
    }
  }
  //   messageStore.userName = e.value;
  //   console.log(e.value);

  // }

  // inputChange2(e: any) {
  //   messageStore.userName = e.value;
  //   console.log(e.value);

  // }
  // inputChange3(e: any) {
  //   messageStore.userName = e.value;
  //   console.log(e.value);

  // }



  render() {

    let listNews: Array<MessageModel> = messageStore.messageList;
    let newsArr = [];
    for (let i = 0; i < listNews?.length; i++) {
      newsArr.push(
        <div className={styles.list_item_box}>
          <div className={styles.user_name}>{listNews[i].username}</div>
          <div className={styles.user_mes} >{listNews[i].content}</div>
          <div className={styles.reply_time}>{listNews[i].gmtCreate}</div>
          <div className={styles.news_devider}></div>
        </div> as never
      )
    }

    return (
      <div>
        <Header />
        <div className={styles.content_container}>
          <div className={styles.now_devider}></div>
          <Row className={styles.content_box}>
            {/* 留言列表 */}
            <Col span={16} className={styles.list_box}>
              <div className={styles.big_title}>观众留言</div>
              <div className={styles.list_item_box}>
                {newsArr}

                {/* <div className={styles.reply}>回复:</div>
                <div className={styles.reply_con}>60岁以上的观众免预约。感谢您的关注！</div>
                <div className={styles.reply_time}>2022-4-16</div> */}
              </div>

            </Col>
            {/* 我的留言 */}
            <Col span={8} className={styles.send_box}>
              <div className={styles.send_title}>留言信息提交</div>
              <div className={styles.tips_text}>如需留言，您可直接填写以下相应信息，最后填写验证符，点击“提交”即可。留言提交成功后，我们将在三个工作日内给您回复或者直接回复邮件。</div>
              <div className={styles.send_name}>您的名字：</div>
              <Input placeholder="请输入您的名字" name="username" onChange={this.inputChange} />
              <div className={styles.send_name}>联系方式：</div>
              <Input placeholder="请输入您的联系方式" name="eamil" onChange={this.inputChange}
              />
              <div className={styles.send_name}>留言内容：</div>
              <TextArea rows={10} placeholder="最多可输入300字" name="content" maxLength={100} onChange={this.inputChange} />
              <Button className={styles.submit} onClick={() => messageStore.onFinish()} >提交</Button>
            </Col>
          </Row>
        </div>
        <Footer />
      </div>
    )
  }
}